<template>
  <div class="setting-block">
    <div class="setting-block--title">
      <slot name="title">{{title}}</slot>
    </div>
    <div class="setting-block--slot">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'setting-block',

  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.setting-block {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 10px;
}
.setting-block--title {
  font-size: 14px;
  font-weight: bold;
  line-height: 22px;
}
.setting-block--slot {
  margin-top: 10px;
}
</style>
